<template>
    <div class="content-wrapper">
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
            <!--<el-breadcrumb-item>{{breadName}}</el-breadcrumb-item>-->
        </el-breadcrumb>
        <div class="">
            <match-info :data="race_detail"></match-info>
            <div class="contentMiddle">
                <ul class="el-menu el-menu--horizontal match-menu">
                  <router-link tag="li" :to="'/'+ luyou +'/detail/index?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&isRun=' + $route.query.isRun" class="el-menu-item">赛事详情</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/rule?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&matchtype=' + race_detail.matchType + '&isRun=' + $route.query.isRun" class="el-menu-item">赛事章程</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/notice?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&matchId=' + $route.query.id + '&isRun=' + $route.query.isRun" class="el-menu-item">赛事公告</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/manage?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&isRun=' + $route.query.isRun" v-if="race_detail.matchType !=3006" class="el-menu-item">赛程管理</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/player?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&matchId=' + $route.query.id + '&cost=' + race_detail.cost + '&matchtype=' + race_detail.matchType + '&isRun=' + $route.query.isRun" class="el-menu-item">参赛者管理</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/rank?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&isRun=' + $route.query.isRun + '&matchtype=' + race_detail.matchType + '&matchformat=' + race_detail.matchFormat + '&rows=50'" v-if="race_detail.matchType !=3006 && isLeague" class="el-menu-item">数据榜单</router-link>
                  <router-link tag="li" :to="'/'+ luyou +'/detail/channel?id='+$route.query.id + '&tasktype=' + $route.query.tasktype + '&isRun=' + $route.query.isRun" v-if="race_detail.matchType ==3006" class="el-menu-item">报名渠道管理</router-link>
                </ul>
                <router-view></router-view>
            </div>
            <!--{{global}}-->
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import MatchInfo from './components/MatchInfo'
  export default{
    components: {
      MatchInfo
    },
    computed: {
      luyou () {
        return this.$route.path.indexOf('history') > -1 ? 'history' : 'race'
      },
      // breadName () {
      //   if (this.$route.path.indexOf('index') > -1) { // 赛事详情
      //     return '赛事详情'
      //   }
      //   if (this.$route.path.indexOf('rule') > -1) { // 赛事章程
      //     return '赛事章程'
      //   }
      //   if (this.$route.path.indexOf('notice') > -1) { // 赛事公告
      //     return '赛事公告'
      //   }
      //   if (this.$route.path.indexOf('manage') > -1) { // 赛程管理
      //     return '赛程管理'
      //   }
      //   if (this.$route.path.indexOf('player') > -1) { // 参赛者管理
      //     return '参赛者管理'
      //   }
      // },
      ...mapGetters({
        global: 'global',
        race_detail: 'race_detail'
      }),
      isLeague () {
        return [24007, 24008, 24009, 24010, 24011, 24012, 24013, 24014, 24015, 24016].indexOf(this.race_detail.matchFormat) > -1
      }
    },
    mounted () {
      this.getDetail()
    },
    watch: {
      // 监听路由变化
      $route (newVal, oldVal) {
        if (newVal.query.id !== oldVal.query.id) {
          this.getDetail()
        }
      }
    },
    methods: {
      getDetail () {
        this.$store.dispatch('race_detail', {
          matchId: this.$route.query.id,
          isRun: this.$route.query.isRun,
          matchtype: this.$route.query.matchtype
        })
      }
    }
  }
</script>

<style scoped>
.content-wrapper {
  background: #ebf0f5;
}
.contentMiddle {
  margin-top: 20px;
  background: #fff;
}
.router-link-active,.router-link-exact-active,.router-link-active.el-menu-item:hover,.router-link-exact-active.el-menu-item:hover{
  border-bottom: 2px solid #00bb90;
  color: #00bb90;
}
.match-menu{
  padding: 0 60px;
}
.match-menu li {
  font-size: 16px;
}
</style>
